<template>
  <div class="vant_body">
    <m-header modile-title="Vant组件试用" go-back="true"></m-header>
    <div class="vant_main">
      <van-button @click="clickBtn" type="primary" size="large">大号按钮</van-button>
      <van-cell title="列表文本" value="信息" @click="cellClik" is-link></van-cell>
      <van-cell center title="列表文本" value="信息" label="描述" :required="clickflag"></van-cell>
      <van-row type="flex" justify="end">
        <van-col span="8">span: 8</van-col>
        <van-col span="8">span: 8</van-col>
        <van-col span="8">span: 8</van-col>
      </van-row>
      <!--弹窗-->
      <van-popup v-model="popup" position="bottom" :close-on-click-overlay="closePopup" :style="{ height: '30%' }">内容</van-popup>
      <div class="van-ellipsis">这是一段最多显示一行的文字，多余的内容会被省略多余的内容会被省略多余的内容会被省略多余的内容会被省略</div>
      <!--日期组件 type:multiple -- 表示可选择多个时间-->
      <div class="time_section">
        <div class="lattice_title">日期区间部分</div>
        <van-cell title="选择单个日期" :value="date" @click="timeShow=true"/>
        <van-calendar v-model="timeShow" @confirm="onConfirm" />

        <van-cell title="选择日期区间" :value="date2" @click="range=true"/>
        <van-calendar v-model="range" type="range" @confirm="onConfirm2" />
      </div>


      <!--复选框部分-->
     <div class="checkbox_part public_part">
       <div class="lattice_title">复选框部分</div>
       <!--复选框-->
       <van-checkbox v-model="checked" @change="onChange" shape="square" checked-color="#d86161"
       >复选框</van-checkbox>
       <!--复选框组合 max: 最大可选数-->
       <van-checkbox-group v-model="result2" ref="checkboxGroup">
         <van-checkbox name="a">复选框 A</van-checkbox>
         <van-checkbox name="b">复选框 B</van-checkbox>
         <van-checkbox name="c">复选框 C</van-checkbox>
       </van-checkbox-group>
       <van-button type="primary" @click="checkAll">全选</van-button>
       <van-button type="info" @click="toggleAll">反选</van-button>

      <!--搭配单元格组件使用-->
       <van-checkbox-group v-model="result">
         <van-cell-group>
           <van-cell
             v-for="(item, index) in list"
             clickable
             :key="item"
             :title="`复选框 ${item}`"
             @click="toggle(index)"
           >
             <van-checkbox
               :name="item"
               ref="checkboxes"
               slot="right-icon"
             />
           </van-cell>
         </van-cell-group>
       </van-checkbox-group>
     </div>

     <!--时间选择部分-->
      <!--备注：type：时间类型 datetime：年月日时分  date：年月日-->
     <div class="time_chose public_part">
       <div class="lattice_title">年月日选择部分</div>
       <van-button @click="openTime">时间选择</van-button><span>选定的时间：{{timeText}}</span>
       <van-datetime-picker
         v-show="timeFlag"
         v-model="currentDate"
         type="date"
         :min-date="minDate"
         :max-date="maxDate"
         @confirm="sureTime"
         @cancel="cancelTime"
       />
     </div>

     <!--输入框 type:输入框类型 label：输入框左侧文本  digit:调用数字键盘（允许输入整数）   number: 调用全键盘（数字）-->
      <!--required：表示必填项    clearable: 清除填写数据-->
      <div class="field_part public_part">
        <div class="lattice_title">input输入框部分</div>
        <van-cell-group>
          <van-field v-model="value" required placeholder="请输入用户名" label="用户名："/>
          <van-field v-model="tel" type="tel" required label="手机号：" placeholder="请输入手机号"/>
          <van-field v-model="sms" center clearable required label="验证码：" placeholder="请输入验证码">
            <van-button slot="button" size="small" type="primary">发送验证码</van-button>
          </van-field>
          <van-field v-model="password"  type="password" label="密 码：" readonly/>
          <!--对输入的内容进行格式化-->
          <van-field v-model="content" label="理 由：" :formatter="formatter" placeholder="请输入内容"/>
          <!--show-word-limit：显示字数统计 autosize:文本域高度-->
          <van-field v-model="message" type="textarea" rows="5" autosize maxlength="1000" show-word-limit label="留 言：" placeholder="请输入留言内容"/>
        </van-cell-group>

        <div class="get_field_value">
          <van-button type="primary" size="large" @click="getField">获取输入框的值</van-button>
        </div>
      </div>

      <!--密码输入框-->
      <div class="password_input public_part">
        <div class="lattice_title">密码框部分</div>
        <!--密码框 info：密码提示语  length: 密码位数
        gutter:密码框之间的距离 mask: false显示明文  true显示密文-->
        <van-password-input :value="word" :gutter="2"  info="密码为6位数字"
        :focused="showKeyboard"
        @focus="showKeyboard=true"
        :error-info="errorInfo"/>
        <!--数字键盘-->
        <van-number-keyboard :show="showKeyboard" @input="onInput" @delete="onDelete" @blur="showKeyboard=false"/>
        <van-button size="large" @click="getPassword">获取密码</van-button>
      </div>

     <!--地区联动选择 show-toolbar: 顶部确认取消按钮-->
      <div class="area_choice public_part">
        <div class="lattice_title">区域联动部分</div>
        <van-field readonly clickable label="地址：" :value="cityText" placeholder="请选择地址" @click="showPicker=true"/>
        <van-popup v-model="showPicker" position="bottom">
          <van-picker show-toolbar :columns="columns3" @cancel="showPicker=false"
                      @confirm="OnChangeArea"/>
        </van-popup>
      </div>

      <!--单选框-->
      <div class="radio_part public_part">
        <!--direction: 选项布局方向  shape：单选按钮的形状-->
        <div class="lattice_title">Radio单选框部分</div>
        <van-radio-group v-model="radio" direction="horizontal" @change="changeRadio">
          <!--<van-radio name="1" shape="square" icon-size="20px">选项一</van-radio>-->
          <van-radio :name="item.id" v-for="(item,index) in radioData" icon-size="20px" :key="index">{{item.text}}</van-radio>
        </van-radio-group>
      </div>

      <!--评分  allow-half：半星模式-->
      <div class="rate_part public_part">
        <div class="lattice_title">评分部分</div>
        <van-rate  :size="25" allow-half v-model="reteValue" @change="changeRate" />
      </div>
      <!--搜索部分  search：按enter或键盘上的搜索图标后触发  input-align:文字显示位置-->
      <div class="public_part">
        <div class="lattice_title">搜索部分</div>
        <van-search background="#4fc08d" v-model="searchValue" placeholder="请输入搜索关键词"  input-align="center" @search="onSearch"
                    @cancel="onCancel" />
      </div>

      <!--滑块部分 min:滑块最小值  max：滑块最大值 step：一次滑动数值-->
      <div class="public_part">
        <div class="lattice_title">slider滑块部分</div>
        <div style="margin-top: 2em">
          <van-slider v-model="sliderValue" bar-height="4px"
                      active-color="#745cab" @change="sliderChange" />
        </div>
        <div style="margin-top: 2em">
          <van-slider v-model="sliderValue" bar-height="4px" active-color="#b85a55">
            <div slot="button" class="custom-button">
              {{ sliderValue }}
            </div>
          </van-slider>
        </div>
      </div>

      <!--步进器【加减框】  step： 表示点击一次+或-值的变化 integer：输入框只能输入整数
      decimal-length：保留固定的小数位数
      async-change: 配合@change事件，表示异步获取输入框中的值
      -->
      <div class="public_part">
        <div class="lattice_title">步进器部分</div>
        <van-stepper v-model="strpper_value" async-change
                     @change="changeStepper" :decimal-length="1" input-width="40px" button-size="32px" />
      </div>

      <!--switch开关-->
      <div class="public_part">
        <div class="lattice_title">switch开关部分</div>
        <div style="margin-top: 2em">
          <van-cell center title="Switch开关">
            <van-switch v-model="switchChecked" @input="onSwitch" />
          </van-cell>
        </div>
      </div>

      <!--Uploader文件上传  max-count：图片上传的最大数量，超出则隐藏上传区域
      :before-read：图片上传时的校正 true通过  false失败-->
      <div class="public_part">
        <div class="lattice_title">Uploadr文件上传部分</div>
        <div style="margin-top: 2em">
          <!--:before-read="beforeRead"-->
          <van-uploader  :after-read="afterRead" :max-count="6" v-model="fileList" multiple/>
        </div>
      </div>

      <!--上拉菜单-->
      <div class="public_part">
        <div class="lattice_title">ActionSheet上拉菜单</div>
        <div style="margin-top: 2em">
          <div @click="show1=true">点击打开上拉菜单</div>
          <van-action-sheet v-model="show1" :actions="actions1" />
        </div>
      </div>

      <!--弹窗-->
      <div class="public_part">
        <div class="lattice_title">Doalog弹出窗</div>
        <div style="margin-top: 2em">
          <div @click="doaLog">弹窗按钮</div>
          <van-dialog v-model="diaShow" title="提示" @confirm="handleConfirm"></van-dialog>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import mHeader from '../../../components/header'
  import {Toast,Dialog} from 'vant'
    export default {
        name: "Vant",
        data(){
          return {
            clickflag: true, // 是否显示必填星号
            popup: false,
            closePopup: true, // 点击遮罩层是否关闭弹窗
            visible: true,
            date: '', // 单个日期显示
            date2: '', // 单个日期显示
            timeShow: false, // 日期插件是否显示
            range: false, // 日期插件是否显示
            checked: true, // 复选框勾选状态
            result: ['a', 'b'], // 复选框组的值(默认选中属性a b的框)
            result2:[], // 全选反选
            list:['1','2','3'],

            timeFlag: false,
            minDate: new Date(2020,0,1), // 时间开始点
            maxDate: new Date(2030,12,1), // 时间结束点
            currentDate: new Date(),
            timeText: '', // 确认后的时间

            value:'', // 用户名
            tel: '', // 电话号码
            sms: '', // 验证码
            password: '123456', // 密码
            content: '', // 内容
            message: '', // 留言内容

            word: '', // 密码输入框值
            showKeyboard: true, // 数字键盘是否显示
            errorInfo: '', // 密码错误提示

            showPicker: false, // 是否显示区域组件的弹窗
            columns:['北京','上海','杭州','广州','深圳'],// 区域联动数据（一级）
            columns2:[ // 区域联动数据（二级）
                { // 第一列
                  values:['星期一','星期二','星期三','星期四','星期五','星期六','星期天'],
                  defaultIndex: 2 // 默认显示值
                },
                { // 第二列
                  values:['上午','中午','下午'],
                  defaultIndex:1
                }
              ],
            columns3:[
              {
                text: '浙江省',
                children:[
                  {
                  text:'杭州',
                  children:[
                    {text: '西湖区'},
                    {text: '下城区'}
                    ]
                },
                  {
                    text:'温州',
                    children:[
                      {text: '鹿城区'},
                      {text: '甄鸥区'}
                    ]
                  }
                ]
              },
              {
                text: '重庆市',
                children:[{
                  text:'县区',
                  children:[
                    {text: '垫江县'},
                    {text: '江北区'}
                  ]
                }]
              },
              {text:'福建省',
                children:[
                  {
                    text:'福州',
                    children:[
                      {text:'鼓楼区'},
                      {text:'台江区'}
                    ]
                  },
                  {
                    text:'厦门',
                    children:[
                      {text:'思明区'},
                      {text:'海沧区'}
                    ]
                  }
                ]
              }
            ],
            cityText: '', // 所选定的地址

            radio:'', // 单选默认选中第一个
            radioData:[
              {text:'草莓',id:'1'},
              {text:'西瓜',id:'2'},
              {text:'樱桃',id:'3'},
              {text:'桃子',id:'4'},
            ],

            reteValue: 3, // 评分数值（默认三星）

            searchValue:'', // 搜索值

            sliderValue: 10,// 滑块的初始值

            strpper_value: 0, // 步进器初始值

            switchChecked:true, // switch开关状态

            fileList:[], // 图片上传的预览

            show1: false, // 是否显示上拉菜单
            actions1: [
              { name: '选项' },
              { name: '选项' },
              { name: '选项', subname: '描述信息' }
            ],
            // 弹窗显示
            diaShow: false,
          }
        },
        mounted(){
        },
        created(){
        },
        methods:{
          clickBtn(){
            this.popup = true
          },
          cellClik(){
            console.log(2)
          },
          formatDate(date,date2) { // 时间转换
            return `${date.getMonth() + 1}/${date.getDate()}`; // 单个时间
            return `${date2.getMonth() + 1}/${date2.getDate()}`; // 多个时间
          },
          // 日期组件的确认(单个时间)
          onConfirm(date){
            this.timeShow = false
            this.date = this.formatDate(date)
            // console.log(this.date)
          },
        //  日期组件（多个时间）
          onConfirm2(date2){
            const [start, end] = date2;
            this.range = false;
            this.date2 = `${this.formatDate(start)} - ${this.formatDate(end)}`;
          },
          // 复选框事件
          onChange(event) {
            console.log(event)
          },
          // 全选 toggleAll：复选框组的方法名 --- 传true为选中  false为取消选中
          checkAll(){
            this.$refs.checkboxGroup.toggleAll(true)
          },
          // 反选
          toggleAll(){
            this.$refs.checkboxGroup.toggleAll()
          },
          // 搭配单元格组件使用的复选框事件  toggle：获取checkbox的选中
          toggle(index) {
            console.log(index)
            this.$refs.checkboxes[index].toggle();
          },
          // 点击选择时间
          openTime(){
            this.timeFlag = true
          },
          // 时间组件的确认事件
          sureTime(e){
            // console.log(e)
            const date = new Date(e)
            let y = date.getFullYear()
            let m = date.getMonth() + 1
            m = m < 10 ? ('0' + m) : m
            let d = date.getDate()
            d = d < 10 ? ('0' + d) : d
            const time =  y + '-' + m + '-' + d
            console.log(time)
            this.timeText = time
            this.timeFlag = false
          },
          // 时间组件的取消事件
          cancelTime(){
            this.timeFlag = false
          },

          // 获取输入框的值
          getField(){
            console.log('用户名：'+this.value+'---电话号码：'+this.tel+'---验证码：'+this.sms+'---内容：'+this.content+'---留言内容：'+this.message)
          },
          // 输入内容格式化
          formatter(content){
            // 过滤输入的数字
            return content.replace(/\d/g, '');
          },


          // 数字键盘输入
          onInput(key){
            this.word = (this.word+key).slice(0,6)
            if (this.word.length !== 6) {
              this.errorInfo = '密码位数不对'
              return
            } else {
              this.errorInfo = ''
            }
          },
          // 数字键盘删除
          onDelete(){
            this.word = this.word.slice(0,this.word.length-1)
          },
          // 获取输入的密码
          getPassword(){
            console.log(this.word)
          },

          // 区域联动
          OnChangeArea(value){
            console.log(value)
            this.cityText = value.join('-')
            this.showPicker = false
          },
          onCancel(){
            Toast('删除')
          },

          // radio单选事件
          changeRadio(name){
            console.log(name) // 获取name的值
          },

          // rate 评分事件
          changeRate(e){
            Toast('当前值为：'+e+'星')
          },

          // 搜索的删除事件和搜索事件
          searchCancel(){
            Toast('取消搜索')
          },
          onSearch(val){
            Toast(val)
          },

          // 滑块事件
          sliderChange(val){
            Toast(val)
          },

          // 步进器异步修改输入框的值
          changeStepper(value){
            console.log(value)
            this.strpper_value = value
          },

          // switch开关异步事件
          onSwitch(checked){
            Dialog.confirm({
              title: '提醒',
              message: '是否切换开关？'
            }).then(() => {
              this.switchChecked = checked;
            }).catch(() => {
              Toast('你点击了取消')
            })
          },

          // 文件上传事件
          afterRead(file) {
            // 此时可以自行将文件上传至服务器
            console.log(file);
          },

          // 图片上传时的校正
          beforeRead(file){
            if (file.type!=='image/jpeg') {
              Toast('请上传jpg格式的图片')
              return false
            }
          },

          // 弹窗显示
          doaLog () {
            //1.基本弹窗
            /*Dialog({
              title: '弹窗',
              message: '弹窗内容'
            })*/
            //2.alert形式弹窗 （与基本格式一样）
           /* Dialog.alert({
              title: '标题',
              message: '弹窗(alert)内容'
            })*/
           //3.comfirm形式弹窗
            /*Dialog.confirm({
              title:'title',
              message: '弹窗内容',
            }).then((res)=>{
              console.log(res) // 确认事件
            }).catch((ret)=>{
              console.log(ret) // 取消事件
            })*/
            //4.以true或false的形式控制显示
            this.diaShow = true
          },
          handleConfirm(){
            // 此处可进行异步请求操作
            // this.diaShow = false
          },
          // 弹窗异步操作
          DiaLogClose(action,done){
            console.log(action)
          }
        },
        components:{
          mHeader
        }
    }
</script>

<style lang="scss" scoped>
  .van-uploader{
    border: 2px solid #cccccc;
  }
.vant_body{
  padding: 60px 0 20em 0;
  .vant_main{
    .lattice_title{
      font-size: 26px;
      background: #006699;
      color: white;
      text-align: center;
      padding: 10px 0;
    }
    .van-cell{
      padding: 0.3rem 0.2rem;
      font-size: 0.25rem;
      .van-cell__value{
        span{
          font-size: 0.1rem;
        }
      }
    }
    .public_part{
      padding: 10px 0;
      .custom-button {
        width: 26px;
        color: #fff;
        font-size: 10px;
        line-height: 18px;
        text-align: center;
        background-color: #b85a55;
        border-radius: 100px;
      }

    }
  }
}
</style>
